/**
 * 3D Hover Effect 自定义指令
 *
 * @param {HTMLElement} el - 绑定指令的元素
 * @param {Object} binding - Vue 指令绑定对象
 * @param {Object} binding.value - 传递给指令的参数对象
 * @param {Array} binding.value.yRange - Y 轴旋转范围，默认为 [-10, 10]
 * @param {Array} binding.value.xRange - X 轴旋转范围，默认为 [-10, 10]
 * @param {Array} binding.value.boxShadowColors - 阴影颜色，默认为 ["#54a29e", "#a79d66"]
 */
const rotateCard = {
  mounted(el, binding) {
    // 获取元素
    const card = el
    // 获取传递给指令的参数或提供默认值
    const options = binding.value || {}
    const yRange = options.yRange || [-10, 10]
    const xRange = options.xRange || [-10, 10]
    const boxShadowColors = options.boxShadowColors || ["#54a29e", "#a79d66"]
    const boxCursor = options.cursor ? 'pointer' : 'auto'

    // 设置样式，定义卡片的基本样式
    card.style.borderRadius = "10px"
    card.style.transition = "0.3s"
    card.style.cursor = boxCursor
    card.style.transform = "perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))"

    /**
     * 获取旋转角度的辅助函数
     * @param {Array} range - 角度范围 [最小值, 最大值]
     * @param {number} value - 当前值
     * @param {number} max - 最大值
     * @returns {number} - 计算后的旋转角度
     */
    function getRotate(range, value, max) {
      return (value / max) * (range[1] - range[0]) + range[0]
    }

    // 注册鼠标移动事件
    card.addEventListener("mousemove", event => {
      // 注册鼠标移动事件，获取鼠标在元素内的偏移
      const { offsetX, offsetY } = event
      // 获取元素的宽度和高度
      const { offsetWidth, offsetHeight } = card
      // 计算Y轴旋转角度
      const ry = -getRotate(yRange, offsetX, offsetWidth)
      // 计算X轴旋转角度
      const rx = getRotate(xRange, offsetY, offsetHeight)
      // 设置X轴旋转角度
      card.style.setProperty("--rx", `${rx}deg`)
      // 设置Y轴旋转角度
      card.style.setProperty("--ry", `${ry}deg`)
      // 添加鼠标悬停效果，使用两种颜色的阴影
      card.style.boxShadow = `3px 3px 10px ${boxShadowColors[0]}, -3px -3px 10px ${boxShadowColors[1]}`
    })

    // 注册鼠标离开事件，恢复默认状态
    card.addEventListener("mouseleave", () => {
      card.style.setProperty("--rx", `0deg`)
      card.style.setProperty("--ry", `0deg`)
      // 移除鼠标悬停效果，去掉阴影
      card.style.boxShadow = "none";
    })
  }
}

export default rotateCard
